
<template>
  <div class="page">
    <video
      class="pageVideo"
      src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      autoplay
      :controls="false"
    ></video>
    <header class="header" :style="'top:' + statusBarHeight + 'px'">
      <!-- ----------------- -->

      <div class="top">
        <img
          src="../../static/images/icon/xiangzuo.png"
          alt=""
          class="leftIcon"
          @click="handleAway"
        />
        <img
          src="../../static/images/icon/toDelivery.png"
          alt=""
          class="avatar"
        />
        <div class="title">
          <div>卡通休闲直播</div>
          <div>13观看</div>
        </div>
        <span> 订阅直播 </span>
      </div>
      <!-- ----------------- -->

      <div class="logo">
        <icon type="fail" :size="23" color="" />
        <span
          ><img src="../../static/images/icon/hello.png" alt="" />
          小程序直播</span
        >
      </div>

      <div class="playerBan">
        
      </div>
    </header>

    <div class="order">
      <div class="text">
        <p>
          <span>系统公告:</span
          >微信倡导健康的直播环境。若发布违法、违规低俗等不良信息，我们将会对违规内容及帐号进行封禁处理。
        </p>
      </div>
      <div class="everyOne">
        <img class="avatar" src="../../static/images/icon/addr.png" />
        <p><span>小仇 😀</span>：说的</p>
      </div>
    </div>

    <footer>
      <input type="text" placeholder="跟主播说点什么" />
      <img src="../../static/images/icon/gift.png" alt="" class="sendList" />
      <img src="../../static/images/icon/share.png" alt="" class="share" />
      <img src="../../static/images/icon/zan.png" alt="" class="zan" />
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 5,
    };
  },
  onLoad() {
    let res = uni.getSystemInfoSync();
    this.statusBarHeight = this.statusBarHeight * 1 + res.statusBarHeight * 1;
   
  },
  onShow() {    
  },
  methods: {
    handleAway() {
      uni.navigateBack();
    },
  },
};
</script>

<style scoped>
.page {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #131315;
}
.page .pageVideo {
  width: 100%;
  height: 100%;
}

.page header {
  width: 100%;
  height: 891rpx;
  position: fixed;
  left: 0;
  right: 0;
}
header .top {
  display: flex;
  height: 64rpx;
  justify-content: flex-start;
  align-items: center;
}
.top .away {
  margin-left: 37rpx;
}
.top .leftIcon {
  width: 32rpx;
  height: 45rpx;
  margin-left: 38rpx;
}
.top .avatar {
  width: 58rpx;
  height: 58rpx;
  margin-left: 45rpx;
  border-radius: 58rpx;
}
.top .title {
  display: flex;
  flex-direction: column;
  margin-left: 15rpx;
}
.title > div:nth-child(1) {
  font-size: 26rpx;
  color: #efefef;
}
.title > div:nth-child(2) {
  font-size: 22rpx;
  color: #717171;
}

.top > span {
  width: 130rpx;
  height: 57rpx;
  display: inline-block;
  background-color: #e66a50;
  font-size: 22rpx;
  line-height: 57rpx;
  border-radius: 25rpx;
  text-align: center;
  color: white;
  font-weight: bold;
  margin-left: 10rpx;
}
header .logo {
  width: 100%;
  height: 40rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  line-height: 0;
}
.logo span {
  font-size: 24rpx;
  color: #cccbc9;
  margin-right: 20rpx;
  letter-spacing: 5rpx;
}
.logo span img {
  width: 32rpx;
  height: 32rpx;
}

header .playerBan {
  text-align: center;
  width: 100%;
}
.playerBan > p:nth-child(1) {
  margin-top: 245rpx;
  text-align: center;
  color: #fff;
}
.playerBan > p:nth-child(2) {
  text-align: center;
  color: #7b6b63;
  margin-top: 40rpx;
}
.playerBan > p:nth-child(3) {
  color: #fff;
  margin-top: 32rpx;
}
.playerBan > p:nth-child(3) > span {
  width: 239rpx;
  background-color: #e66a50;
  height: 80rpx;
  display: inline-block;
  border-radius: 10rpx;
  font-size: 34rpx;
  line-height: 80rpx;
}
.page .order {
  height: 289rpx;
  position: fixed;
  bottom: 99rpx;
  width: 100%;
}
.order .text {
  width: 422rpx;
  height: 184rpx;
  display: inline-block;
  line-height: 48rpx;
  font-size: 30rpx;
  margin-left: 44rpx;
}
.text p {
  color: #d8d3cf;
}
.text p span {
  color: #aaa9a7;
}
.order .everyOne {
  height: 106rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 36rpx;
  color: #fff;
}
.everyOne .avatar {
  width: 45rpx;
  height: 45rpx;
  background-color: #ff0;
}

.page footer {
  width: 100%;
  height: 100rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 222;
  display: flex;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
footer input {
  margin-left: 53rpx;
}

.sendList {
  width: 80rpx;
  height: 80rpx;
  background-color: #e66a50;
}

.share {
  width: 42rpx;
  height: 35rpx;
  border-radius: 80rpx;
  margin-left: 35rpx;
}

.zan {
  width: 38rpx;
  height: 31rpx;
  margin-left: 53rpx;
}
@import url("../../static/images/icon2/iconfont.css");

/* @font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-extra::before {
  content: '\e626';
} */
</style>